<script setup>
import {onMounted, reactive} from "vue";

let data = reactive({
  showAlert: false,
  userName:'',
  passWord: ''
})
let timeLine = window.sessionStorage.getItem('timeLine')
onMounted(()=>{
  if (!timeLine){
    data.showAlert = true;
  }
})
const showAlert = () => {
  data.showAlert = true;
}
const onReset = () => {
  data.passWord = '';
  data.userName = '';
}
const onSubmit = () => {
  let time = new Date().getTime() + 19920802;
  if (data.userName == 'xiaojin' && data.passWord == '123qwe...') {
    window.sessionStorage.setItem('timeLine',time)
    data.showAlert = false;
    window['login'] = true;
  }
}
defineExpose({
  showAlert
})
</script>

<template>
  <q-dialog :persistent="true" v-model="data.showAlert" >
    <div class="login-out">
      <div class="t1">智能政务助手</div>
      <div class="t2">在进去助手前请先进行登录</div>
      <div class="t3">
        <q-form @submit="onSubmit" @reset="onReset" class="q-gutter-md" >
          <q-input filled v-model="data.userName" label="名称 *" hint="请输入用户名" lazy-rules
            :rules="[ val => val && val.length > 0 || 'Please type something']"
          />
          <q-input filled v-model="data.passWord" label="密码 *" hint="请输入密码" lazy-rules
                   :rules="[ val => val && val.length > 0 || 'Please type something']"
          />
          <div class="submit">
            <q-btn label="确定" type="submit" color="primary"/>
            <q-btn label="重置" type="reset" color="primary" flat class="q-ml-sm" />
          </div>
        </q-form>
      </div>
    </div>
  </q-dialog>
</template>

<style scoped lang="scss">
.login-out{
  width: 500px;
  height: 450px;
  background-color: #ffffff;
  padding: 20px;
  .t1{
    font-size: 20px;
    padding-bottom: 10px;
  }
  .t2{
    font-size: 14px;
    padding-bottom: 30px;
  }
  .t3{
    width: 90%;
    margin: 0 auto;
  }
  .submit{
    padding-top: 60px;
  }
}
</style>
